import {
  Menu,
  Avatar,
  Layout,
  Dropdown,
  message,
} from 'antd';
import React from 'react';
import { connect, DispatchProp } from 'dva';
import { UserModelState } from '@/models/user';
import logo from '../../assets/logo.png'

import styles from '../styles.less';

type IProps = {
  user: UserModelState;
}

class Header extends React.Component<IProps & DispatchProp> {
  get menu() {
    return (
      <Menu>
        <Menu.Item onClick={this.onLogout}>
          退出登录
        </Menu.Item>
      </Menu>
    );
  }

  get userInfo() {
    return this.props.user;
  }

  get avatar() {
    const {
      avatar,
    } = this.userInfo;
    return avatar;
  }

  get nickName() {
    const {
      username,
    } = this.userInfo;
    return username;
  }

  private onLogout = () => {
    this.props.dispatch({ type: 'user/logOut' });
  };

  render() {
    return (
      <Layout.Header className={styles.fixed_header}>
        <div className={styles.header_left}>
          <img
            alt="Logo"
            className={styles.logo}
            // src="http://static.yutao2012.com/e969-994a-15c6-5bfe-882e-f739.png"
            src={logo}
          />
          JieData后台管理系统
        </div>
        <Dropdown overlay={this.menu} arrow={true}>
          <div className={styles.user_center}>
            <Avatar src={this.avatar} />
            <div className={styles.user_name}>
              {this.nickName}
            </div>
          </div>
        </Dropdown>
      </Layout.Header>
    );
  }
}

export default connect((state: { user: UserModelState }) => {
  return { user: state.user };
})(Header);
